 <template>
  <div class="container"
       @click="tapEvent">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll()">
      <img :src="ImgBaseUrl+'/mp_2.5/wenjuan.png'"
           v-if="ImgBaseUrl"
           alt
           class="questionImg" />
      <p class="tips">{{dataList.des}}</p>
      <!-- 单选题 -->
      <ul class="ul">
        <p class="text">单选题</p>
        <li class="li"
            v-for="(item,index) in alone_issue"
            :key="index">
          <p class="title">{{item.issue}}</p>
          <span class="answer"
                v-for="(val,num) in item.reply"
                :key="num">
            <span class="checkbox">
              <img class="img"
                   @tap="checkEvent(val,item.reply)"
                   v-if="val.action&&ImgBaseUrl"
                   :src="ImgBaseUrl+'/mp_2.5/xuanzhong.png'" />
              <img class="img"
                   @tap="checkEvent(val,item.reply)"
                   v-if="!val.action&&ImgBaseUrl"
                   :src="ImgBaseUrl+'/mp_2.5/weixuanzhong.png'" />
            </span>
            {{val.value}}
          </span>
        </li>
      </ul>
      <!-- 多选题 -->
      <ul class="ul ulmore">
        <p class="text">多选题</p>
        <li class="li"
            v-for="(item,index) in more_issue"
            :key="index"
            :class="more_issue.length==1?'one':''">
          <p class="title">{{item.issue}}</p>
          <span class="answer box"
                v-for="(val,num) in item.reply"
                :key="num">
            <span class="checkbox">
              <img class="img"
                   @tap="checkEventMore(val)"
                   v-if="val.action&&ImgBaseUrl"
                   :src="ImgBaseUrl+'/mp_2.5/xuanzhong.png'" />
              <img class="img"
                   @tap="checkEventMore(val)"
                   v-if="!val.action&&ImgBaseUrl"
                   :src="ImgBaseUrl+'/mp_2.5/weixuanzhong.png'" />
            </span>
            {{val.value}}
          </span>
        </li>
        <p class="text text1">其他补充</p>
        <textarea class="comments"
                  maxlength="100"
                  placeholder="您的评价是我们前进的动力~"
                  @input="change()"
                  v-model="content"
                  @blur="blurEvent(false)"
                  v-if="mark"></textarea>
        <div class="comments"
             v-else
             @tap="clickEvent(true)">{{content == ''?'您的评价是我们前进的动力~':content}}</div>
        <span class="maxlength">{{maxlength}}字</span>
      </ul>
      <div class="bottom">
        <button class="btn left"
                @click="subBtn(0)">忽略</button>
        <button class="btn right"
                @click="subBtn(1)">提交</button>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      ImgBaseUrl: common.image_resource,
      image_arr: [],
      baseUrl: common.image_response,
      dataList: "",
      isCheck: false,
      arr: [], //单选
      arr2: [],
      arrmore: [],
      maxlength: 100,
      content: "",
      mark: true,
      // images:['oonidiafin.jpg','sdfiaibf.jpg'],
      images: [],
      sub_id: "",
      alone_issue: [],
      more_issue: []
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "术后满意调查表"
    });
    if (options.id) {
      this.sub_id = options.id; //补贴单id
      this.images = options.images; //上传的照片
    }
  },
  onShow () {
    this.getData();
  },
  methods: {
    checkEvent (item, reply_arr) {
      reply_arr.forEach(val => {
        val.action = val.id == item.id;
      });
      this.$forceUpdate();
    },
    checkEventMore (item, reply_arr) {
      item.action = true;
      this.$forceUpdate();
    },
    getData () {
      common.mmk_Loading(0);
      common.fly_post("api/v4_2/issue/index", "", result => {
        common.mmk_Loading(1);
        let res = result.data;
        if (res.status_code == 0) {
          this.dataList = res.data;
          this.alone_issue = res.data.alone_issue;
          this.more_issue = res.data.more_issue;
        } else {
          common.mmk_Loading(2, res.message);
        }
      });
    },
    change () {
      this.maxlength = 100 - this.content.length;
      this.content = this.content.replace(
        /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,
        ""
      );
    },
    blurEvent (e) {
      this.mark = e;
    },
    clickEvent (e) {
      this.mark = e;
    },
    subBtn (e) {
      //照片+问卷 提交
      // if(this.arr.length == 0 || this.arrmore.length == 0 ){
      //   common.mmk_Loading(2,'请将信息填写完毕后再提交哦~')
      //   return false;
      // }
      // return false;

      // 获取单选数组
      let arr_single = [],
        arr_more = [];
      this.alone_issue.forEach(item => {
        item.reply.forEach(val => {
          if (val.action) {
            arr_single.push(val.id);
          }
        });
      });
      // 获取复选框数据
      this.more_issue.forEach(item => {
        item.reply.forEach(val => {
          if (val.action) {
            arr_more.push(val.id);
          }
        });
      });
      setTimeout(() => {
        common.mmk_Loading(0);
        let type_id;
        if (e == 1) {
          type_id = 1;
        } else {
          type_id = 0;
        }
        common.fly_post(
          "api/v4_2/issue/submit",
          {
            id: this.sub_id,
            images: this.images,
            alone: JSON.stringify(arr_single),
            more: JSON.stringify(arr_more),
            remark: this.content,
            type: type_id
          },
          msg => {
            common.mmk_Loading(1);
            var that = this;
            let res = msg.data;
            if (res.status_code == 0) {
              // common.mmk_Loading(2,res.message);
              wx.showToast({
                title: res.message,
                icon: "none",
                duration: 2000,
                mask: true,
                success: function () {
                  setTimeout(() => {
                    // wx.redirectTo({
                    //   url: `/pages/bt_order_detail/main?str=`+that.sub_id
                    // })
                    wx.setStorageSync("bt_order", "1"); //补贴单刷新标记
                    wx.navigateBack({
                      delta: 1
                    });
                  }, 200);
                }
              });
            } else {
              common.mmk_Loading(2, res.message);
              return false;
            }
          }
        );
      }, 200);
    },
    scroll () { }
  }
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  // overflow: auto;
  background: #f3f4f6;
  padding-bottom: 60px;
  position: relative;
  .questionImg {
    width: 375px;
    height: 86px;
    display: block;
  }
  .tips {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    padding: 15px 15px 5px;
    background-color: #fff;
  }
  .ul {
    padding: 15px 15px 23px;
    color: #333;
    background-color: #fff;
    margin-bottom: 9px;
    position: relative;
    &.ulmore {
      // margin-bottom: 2px;
    }
    .text {
      font-size: 15px;
      line-height: 21px;
      margin-bottom: 10px;
      &.text1 {
        font-size: 14px;
      }
    }
    .li {
      margin-bottom: 26px;
      &:last-of-type {
        margin-bottom: 0;
      }
      &.one {
        margin-bottom: 0;
      }
      .title {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
      }
      .answer {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #666;
        margin-right: 18px;
        .checkbox {
          width: 16px;
          height: 16px;
          color: #666;
          .img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
          }
        }
        &.box {
          display: inline-block;
          width: 27%;
          height: 32px;
        }
      }
    }
    .comments {
      width: 100%;
      height: 89px;
      background: #fbfbfb;
      opacity: 1;
      box-sizing: border-box;
      padding: 9px 10px;
      color: #999;
      white-space: pre-wrap;
    }
    .comments::placeholder {
      font-size: 13px;
    }
    .maxlength {
      position: absolute;
      bottom: 8%;
      right: 6%;
      color: 666;
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    height: 49px;
    margin-top: 45px;
    .btn {
      width: 49.8%;
      border: none;
      border-radius: 0;
      font-size: 17px;
      color: #fff;
    }
    .left {
      background: rgba(153, 153, 153, 1);
      opacity: 1;
      border-left: 1px solid #fff;
    }
    .right {
      background-color: #ff383e;
    }
  }
}
</style>

